<div class="VMSmessageInfo regularContent" style="border-radius: 0;box-shadow: none;background:none;">
  <div class="content add-box-edit">
    <!-- <div class="header">
      <span style="color: #1890ff;">
        <i class="iconfont icon-yingyong"></i>
        {{"DisseminationManagement.MessageLibrary.VMS_Message_Info" | translate}}</span>
    </div> -->
    <div class="contentBody">
      <!-- <div class="inputSet">
        <nz-form-item class="flex">
          <nz-form-label nzRequired>{{"DisseminationManagement.MessageLibrary.Message_Category" | translate}}</nz-form-label>
          <nz-form-control>
            <nz-select style="width: 3rem;" [(ngModel)]="categoryId" nzAllowClear nzPlaceHolder="Choose"
            (ngModelChange)="setCategory()">
              <nz-option *ngFor="let item of addService.selectionList.messageCategory" [nzValue]="item.categoryId"
                [nzLabel]="item.categoryName">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item >
      </div> -->
      <div class="VMSboard" *ngIf="addService.displayMessage" style="margin-top: 0;">
        <div class="page-toolbar">
          <div class="page" [ngClass]="addService.showPage === i ? 'page-active' : ''" (click)="goToPage(i)"
            *ngFor="let item of addService.displayMessage.templatePages;index as i">{{"DisseminationManagement.MessageLibrary.Page" | translate}}{{item.pageSeq}}</div>
        </div>
        <div class="VMSboard-content">
          <!-- <div class="toolbarGroup">
            <div class="toolBtn">
              <i class="iconfont icon-Undo" [ngStyle]="pageUndo.length < 1 ? {'color': '#babec1'} : ''"
                (click)="undo()"></i>
              <i class="iconfont icon-Redo" [ngStyle]="pageRedo.length < 1 ? {'color': '#babec1'} : ''"
                (click)="redo()"></i>
              <i class="iconfont icon-align-left" (click)="align('flex-start',contentStyleList[addService.showPage],addService.displayMessage.templatePages[addService.showPage].templateGraphics)"></i>
              <i class="iconfont icon-align-center" (click)="align('center',contentStyleList[addService.showPage],addService.displayMessage.templatePages[addService.showPage].templateGraphics)"></i>
              <i class="iconfont icon-align-right" (click)="align('flex-end',contentStyleList[addService.showPage],addService.displayMessage.templatePages[addService.showPage].templateGraphics)"></i>
            </div>
          </div> -->
          <div class="VMSboard-container" [class.min-height]="initDisplayMessage" id="VMSboardContainer">
            <div #viewpoint class="viewpoint-wrap" [ngStyle]="containerStyle" >
              <div>
          
                <input class="vmsDescription" nz-input
                  *ngFor="let item of addService.displayMessage.templatePages[addService.showPage].templateTexts;index as i"
                  [ngStyle]="contentStyleList[addService.showPage][i]['style']"
                  [(ngModel)]="contentStyleList[addService.showPage][item.textSeq-1]['text']"
                  style="color:white;background: transparent;border: none;resize: none;overflow: hidden;"
                  (focus)="startEdit((item.textSeq-1), $event,addService.showPage,item.textSeq-1)" (blur)="handleBlur($event)" [maxlength]="item.maxChars" />
              </div>
              <div
                *ngFor="let item of addService.displayMessage.templatePages[addService.showPage].templateGraphics;index as i"
                class="content" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)"
                [id]="'vmsInfoContainer'+i" 
                [ngStyle]="{'width.px': item.graphicAreaW,'height.px':item.graphicAreaH,'left.px':item.graphicAreaX,'top.px':item.graphicAreaY}">
                <div class="space"
                  *ngIf="!addService.displayMessage.templatePages[addService.showPage].graphics[item.graphicAreaSeq-1]">
                </div>
                <img
                  *ngIf="addService.displayMessage.templatePages[addService.showPage].graphics[item.graphicAreaSeq-1]"
                  [src]="addService.displayMessage.templatePages[addService.showPage].graphics[item.graphicAreaSeq-1].vmsGraphic.url"
                  alt="" cdkDrag style="width: 100%;">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="editController">
        <div *ngIf="(contentStyleList && editTextSeq || editTextSeq === 0)">
          {{"DisseminationManagement.MessageLibrary.info" | translate}}</div>
      </div>
    </div>
    <!-- <div class="buttonView">
      <div *ngIf="contentStyleList&&(editTextSeq||editTextSeq===0)">
        <ul class="editContainer">
          <li>
            <div>
              <nz-select style="width: 1.5rem;margin-left: 0.1rem;"
                [(ngModel)]="contentStyleList[addService.showPage][editTextSeq]['style']['font-size']">
                <nz-option *ngFor="let item of allList.fontSize" [nzValue]="item.style" [nzLabel]="'DisseminationManagement.MessageLibrary.' + item.name | translate">
                </nz-option>
              </nz-select>
              <nz-select style="width: 1.5rem;margin-left: 0.1rem;"
                [(ngModel)]="contentStyleList[addService.showPage][editTextSeq]['style']['color']">
                <nz-option *ngFor="let item of allList.color" [nzValue]="item.style" [nzLabel]="'DisseminationManagement.MessageLibrary.' + item.name | translate">
                </nz-option>
              </nz-select>
              <nz-select style="width: 2rem;margin-left: 0.1rem;"
                [(ngModel)]="contentStyleList[addService.showPage][editTextSeq]['style']['letter-spacing']">
                <nz-option *ngFor="let item of allList.lettSpacing" [nzValue]="item.style" [nzLabel]="'DisseminationManagement.MessageLibrary.' + item.name | translate">
                </nz-option>
              </nz-select>
            </div>
          </li>
        </ul>
      </div>
    </div> -->
  </div>
</div>
